梦入琼楼寒有月，行过石树冻无烟

CSS 选择器

2022-04-21

Div p

1
2
3
4
5
6
7
8
9
10
11
12
<style>
	div p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>Hello</p>
		<p>World!</p>
	</div>
	<p>Helo,world</p>
</body>

Div>p

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
	div>p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>Hello</p>
		<p>World!</p>
	</div>
	
		<div>
		<p>Hello</p>
		<p>World!</p>
	</div>
	
	<div>
	<p>Helo,world</p>
	</div>
	
	<p>Hello,world</p>
</body>

Div~p

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
	div~p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>1-Hello</p>
		<p>World!</p>
	</div>
	
		<div>
		<p>2-Hello</p>
		<p>World!</p>
	</div>
	
	<div>
	<p>3-Helo,world</p>
	</div>
	<p>4-Hello,world</p>
	<p>Hello,world</p>
	<p>Hello,world</p>
</body>

Div+p

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
	div+p {
		background-color: red;
	}
</style>
<body>
	<div>
		<p>1-Hello</p>
		<p>World!</p>
	</div>
	
		<div>
		<p>2-Hello</p>
		<p>World!</p>
	</div>
	
	<div>
	<p>3-Helo,world</p>
	</div>
	<p>4-Hello,world</p>
	<p>Hello,world</p>
	<p>Hello,world</p>
</body>
ID DE FA
空格 Div里面的p元素所使用
> Div+p里面的所有内容所使用
～ Div+p里面以外所使用
+ Div+p里面外第一个内容所使用的
⬅️ Go back